<template>
	<!-- 自定义导航栏 -->
	<view class="navigation">
		<view class="iconfont icon-fanhui leftItem">
			<u-icon v-if="isback" @click="toback" color="#fff" name="arrow-left" size="28"></u-icon>
			<view v-if="isSelect" style="display: flex;align-items: center;width: 100%;justify-content: center;">
				<text>新城区</text>
				<u-icon name="arrow-down" size="15" color="#fff"></u-icon>
			</view>
		</view>
		<!-- <slot name='nav' class="middleItem"></slot> -->
		<view class="middleItem" v-if="navtitle != ''">
			<!-- 导航栏标题 -->
			<span style="color: #fff;" v-if="navtitle != ''">{{ navtitle }}</span>
		</view>
		<view class=" rightItem">
			<text v-if="rightBtn!=''" @click="rightClick">{{rightBtn}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		//  组件的属性列表
		props: {
			isback: { //是否显示返回按钮,默认不显示
				type: Boolean,
				value: false
			},
			path: { //跳转路径地址，不传则默认返回上一步
				type: String
			},
			isShowBg: {
				type: Boolean,
				value: true
			},
			isCrowd: {
				type: Boolean,
				value: false
			},
			isSelect: {
				type: Boolean,
				value: false
			},
			rightBtn: {
				type: [String],
				default: ''
			},
			navtitle: {
				type: [String],
				default: ''
			},
		},
		data() {
			return {}
		},

		//  组件的方法列表
		methods: {
			// 返回上一级
			toback() {
				uni.navigateBack({})
			},
			rightClick() {
				this.$emit("rightClick", '')
			}
		}
	}
</script>

<style lang="less" scoped>
	/* 导航栏内容 */
	.navigation {
		height: 44px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		justify-content: space-around;
		align-items: center;
		background: transparent;

		.leftItem {
			width: 20%;
			text-align: center;
		}

		.middleItem {
			width: 60%;
			text-align: center;
		}

		.rightItem {
			width: 20%;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}

		.iconfont {
			color: #fff;
		}

		.icon-fanhui {
			color: #fff;
			// position: absolute;
			left: 20rpx;
			font-size: 32rpx;
		}
	}
</style>